<template>
  <div class="adminHandle" >
    <div style="padding-top: 30px;padding-left: 10px">
      <el-form ref="form" :model="tableData" label-width="80px" @submit.native.prevent>
        <el-form-item label="教师姓名">
          <div>{{tableData.name}}</div>
        </el-form-item>
        <el-form-item label="教师工号">
          <div>{{tableData.number}}</div>
        </el-form-item>
        <el-form-item label="教师性别">
          <div>{{tableData.sex}}</div>
        </el-form-item>
        <el-form-item label="教师职称">
          <div>{{tableData.title}}</div>
        </el-form-item>
        <el-form-item label="教师手机">
          <div v-show="!isedit()">{{tableData.phone}}</div>
          <div  @keydown.enter="quitedit()"><el-input v-model="tableDataTimely.phone" v-show="isedit()"></el-input></div>
        </el-form-item>
        <el-form-item label="创建人">
          <div>{{tableData.createBy}}</div>
        </el-form-item>
        <el-form-item label="创建时间">
          <div>{{tableData.createTime}}</div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">确认修改</el-button>
          <el-button @click="toedit()">编辑</el-button>
          <el-button @click="quitedit()" v-show="isedit()">退出编辑</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);

}
</style>


<script>
import axios from 'axios'

export default {
  name: "TeacherInfoEdit",
  data() {
    return {
      tableDataTimely:{},
      tableData:{},
      edit:0,
    }
  },
  methods: {
    toedit(){
      this.timelyPhone = this.tableData.phone
      this.edit = 1
    },
    quitedit(){
      this.edit = 0
    },
    onSubmit(){
      this.edit = 0
      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');

      axios.defaults.headers.common["token"] = this.token;
      axios.put(this.ip+'/TEACHER/',this.tableDataTimely).then((res)=>{console.log("put success!",res)})
      console.log("submitted!!!")
    },
    isedit(){
      if(this.edit === 0){return false}
      else {return true}
    }
  },
  mounted() {

    this.ip = localStorage.getItem('ip');
    this.token = sessionStorage.getItem('token');

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/TEACHER/msg')).then((response)=>{
      this.tableData = response.data
      this.tableDataTimely = this.tableData
    }).catch(function (error) {
      console.log(error);
    });
  }
}
</script>

<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
</style>
